<template>
   <div class="box">
       <div class="small_" v-for="(item,index) in url_" :key="index">
           第{{index+1}}张:  预览
           <img :src="item" alt="" class="img_">
           <div class="choose">
               <input type="file"  @change="fil_($event,index)" >
               <button v-show="but_[index]"  @click="submitHead(index)">保存</button>
           </div>
       </div>
   </div>
</template>

<script>
import api from "@/api";
import {baseUrl} from "@/config/api/global";

export default {
    name: "CarouselMap",
    data(){
        return{
           url_:[],
           url_old:["","",""],
           but_:[false,false,false],
           files_:["","",""],
           data_:"",
           delImage:"",
        }
    },
    watch:{
        url(newValue,oldValue){
            this.url = newValue;
        }
    },
    created(){
           let data = JSON.parse(window.localStorage.getItem("DataContent"));
           if(data) {
               this.data_ = data;
               for (let i = 0; i < data.length; i++) {
                   if (data[i].options === "home_carousel") {
                       this.url_ = data[i].content.split(',');
                       this.url_old = data[i].content.split(',');
                       return;
                   }

               }
           }
    },
    methods:{
        fil_(event,index){
            this.url_[index] = this.echo(event);
            this.files_[index] =event.target.files[0];
            this.but_[index] = true;

        },

        submitHead(index) {
            let token = window.localStorage.getItem("AUTHORIZATION_ADMIN_TOKEN")
            // 添加需要上传的文件
            const form = new FormData();
            let _this = this;
            form.append('file', _this.files_[index]);
            form.append("logotype","home_carousel")
            form.append("oldImg",_this.markDelete(index))
            api.uploadAdminWebImg(form).then((res)=>{
                 if(res.data.code === 200){
                     api.getAdminWeb().then((res)=>{
                         window.localStorage.setItem("DataContent",JSON.stringify(res.data.data));
                     })
                     this.url_[index] = res.data.data[0];
                     this.url_old[index] = res.data.data[0];
                     this.$store.commit("requestInfo", "上传成功");
                     _this.but_[index] = false;
                 }else {
                     this.url_[index] = this.url_old[index];
                     this.$store.commit("requestInfo", "上传失败");
                 }
            })
        },
        echo(event){
                //根据这个 <input> 获取文件的 HTML5 js 对象
                let files = event.target.files;
                let file;
                if (files && files.length > 0) {
                    // 获取目前上传的文件
                    file = files[0];
                    // 那么我们可以做一下诸如文件大小校验的动作
                    if (file.size > 1024 * 1024 * 5) {
                        this.$store.commit("requestInfo", "图片大小不能超过 5MB!");
                        return "";
                    }
                    // !!!!!!
                    // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL
                    // 获取 window 的 URL 工具
                    let URL = window.URL || window.webkitURL;
                    // 通过 file 生成目标 url
                     return  URL.createObjectURL(file);
                }
        },
        //标记删除
        markDelete(index){
            let delImg = this.url_old[index]+"!del"
            let content = "";
            for(let i=0;i<this.url_old.length;i++){
                if(i === index){
                    content+= delImg;
                }else{
                   content+= this.url_old[i]
                }
                if(i<this.url_old.length-1){
                    content +=',';
                }
            }
            return content
        },

    }
}
</script>

<style scoped>
input{
    width: 250px;
}
.box{
    display: flex;
    justify-content: left;
    padding: 15px 0;
    background: white;
}

.small_{
    width: 300px;
    margin-left: 60px;
}
.choose{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
img{
    margin-bottom: 10px;
}
.img_{
   margin-top: 5px;
   width: 300px;
   aspect-ratio: 16/9;
   vertical-align:top
}
button{
    border: 0;
    background: #3586f1;
    color: white;
    cursor: pointer;
    padding:3px 5px;
    border-radius: 2px;
}
button:hover{
    opacity: .9;
 }

</style>